<template>
  <div class="lesson-list" v-if="groupDatas.dataArr">
    <div class="title">{{groupDatas.dataArr[0].title}}</div>
    <scroll-container ref="scrollContainer">
      <multiList @scrollTo="scrollTo" :groupDatas="groupDatas" :groupOffset="1" :head="head">
        <ImgList_w312_msjs
          :groupData="groupDatas.dataArr[0]"
          :focArr="groupDatas.focArr[0]"
          :group="group"
        ></ImgList_w312_msjs>
      </multiList>
    </scroll-container>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import ImgList_w312_msjs from "../ImgList_w312_msjs";

export default {
  components: {
    scrollContainer,
    multiList,
    ImgList_w312_msjs
  },
  props: ["groupDatas", "group"],
  methods: {
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    }
  },
  data() {
    return {
      scrollY: 0,
      backObjName: "hskt-list",
      hs: this.$store.state.hs,
      head: {
        left: "0-0"
      }
    };
  },
  created() {}
};
</script>
<style lang="less" scoped>
.lesson-list {
  margin-left: -48px;
  margin-top: 190px;
  width: 1565px;
  overflow: hidden;
  height: 890px;
  .title {
    position: absolute;
    left: 1421px;
    top: 77px;
    width: 378px;
    height: 59px;
    text-align: right;
    /*margin-top: 77px;*/
    /*margin-bottom: 48px;*/
    /*margin-right: 120px;*/
    font-family: MicrosoftYaHei;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    color: #a8e7ff;
  }
}
</style>
